<script setup>
import { computed } from "vue";
import UserProfile from "@/components/UserProfile.vue";

const props = defineProps({
  show: Boolean, // 是否显示弹框
})

const showDialog = computed(() => {
  return props.show
})

const emits = defineEmits(['hide'])
// 关闭弹框触发
const close = () => {
  emits('hide',false)
}

</script>

<template>
  <el-dialog class="config-dialog" v-model="showDialog" :close-on-click-modal="true" :before-close="close" style="max-width: 400px" title="账户信息" >
    <div class="flex-center-col p-4 pt-0" id="user-info">
      <user-profile @hide="close"/>
    </div>
  </el-dialog>
</template>

<style lang="stylus">
.config-dialog {
  .el-dialog {
    --el-dialog-width 90%;
    max-width 800px;
  }
}
</style>